<template>
	<div class="code-box">
		<div class="flex-box">
			<label>
				<input v-model="inputValue" :focus="autoFocus" :maxlength="maxlength" class="hide-input" />
			</label>
			<v-row justify="center" align="center">
				<v-col v-for="(item, index) in ranges" :key="index" cols="auto">
					<div :class="['item', { active: codeIndex === item, middle: type === 'middle', bottom: type === 'bottom', box: type === 'box' }]">
						<div class="line" v-if="type !== 'middle'"></div>
						<div v-if="type === 'middle' && codeIndex <= item" class="bottom-line"></div>
						<div v-if="isPwd && codeArr.length >= item">
							<span class="dot">.</span>
						</div>
						<div v-else> {{ codeArr[index] ? codeArr[index] : ''}}</div>
					</div>
				</v-col>
			</v-row>
<!--			<div v-for="(item, index) in ranges" :key="index">-->
<!--				<div :class="['item', { active: codeIndex === item, middle: type === 'middle', bottom: type === 'bottom', box: type === 'box' }]">-->
<!--					<div class="line" v-if="type !== 'middle'"></div>-->
<!--					<div v-if="type === 'middle' && codeIndex <= item" class="bottom-line"></div>-->
<!--					<div v-if="isPwd && codeArr.length >= item">-->
<!--						<span class="dot">.</span>-->
<!--					</div>-->
<!--					<div v-else> {{ codeArr[index] ? codeArr[index] : ''}}</div>-->
<!--				</div>-->
<!--			</div>-->
		</div>
	</div>
</template>

<script>
	export default {
		name: 'mypOneInput',
		props: {
			// 支持外部提供，支持使用v-model
			// 支持通过value来做清空
			value: {
				type: String,
				default: ''
			},
			// 4/6
			maxlength: {
				type: Number,
				default: 4
			},
			autoFocus: {
				type: Boolean,
				default: false
			},
			isPwd: {
				type: Boolean,
				default: false
			},
			// middle-middle line, bottom-bottom line, box-square box
			type: {
				type: String,
				default: "bottom"
			}
		},
		watch: {
			maxlength: {
				immediate: true,
				handler: function(newV) {
					if (newV === 6) {
						this.ranges = [1, 2, 3, 4, 5, 6]
					} else {
						this.ranges = [1, 2, 3, 4]
					}
				}
			},
			value: {
				immediate: true,
				handler(newV) {
					if (newV !== this.inputValue) {
						this.inputValue = newV;
						this.toMakeAndCheck(newV)
					}
				}
			},
			inputValue(value) {
				this.$emit('input', value);
				// this.toMakeAndCheck(value)
			}
		},
		data() {
			return {
				inputValue: '',
				codeIndex: 1,
				codeArr: [],
				ranges: [1, 2, 3, 4]
			}
		},
		methods: {
			toMakeAndCheck(val) {
				const arr = val.split('');
				this.codeIndex = arr.length + 1;
				this.codeArr = arr;
				if (this.codeIndex > Number(this.maxlength)) {
					this.$emit('finish', this.codeArr.join(''))
				}
			},
			// refs 时不再提供 v-model 支持
			// 支持使用refs来设置value
			// 没有提供数据保护与检测，自己在外面对数据进行检测保护
			set(val) {
				this.inputValue = val;
				this.toMakeAndCheck(val)
			},
			// 支持使用refs来清空
			clear() {
				this.inputValue = '';
				this.codeArr = [];
				this.codeIndex = 1;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../styles/variables";
	@keyframes twinkling {
		0% {
			opacity: 0.2;
		}

		50% {
			opacity: 0.5;
		}

		100% {
			opacity: 0.2;
		}
	}

	.code-box {
		text-align: center;
	}

	.flex-box {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		position: relative;
	}

	.flex-box .hide-input {
		position: absolute;
		top: 0;
		left: -100%;
		width: 200%;
		height: 100%;
		text-align: left;
		z-index: 9;
		opacity: 0;
		display: none;
	}

	.flex-box .item {
		position: relative;
		width: 90px;
		height: 120px;
		/*margin-right: 9px;*/
		font-size: 35px;
		font-weight: bold;
		color: $text-color;
		line-height: 120px;
	}

	/*.flex-box .item {*/

	/*	& :last-child {*/
	/*		margin-right: 0;*/
	/*	}*/
	/*}*/


	.flex-box .middle {
		border: none;
	}

	.flex-box .box {
		box-sizing: border-box;
		background: #ffffff;
		// border: 2upx solid #cccccc;
		border-radius: $border-radius-root;
		box-shadow: $box-shadow-base;
	}

	.flex-box .bottom {
		box-sizing: border-box;
		border-bottom: 4px solid #212121;
	}

	.flex-box .active {
		border-color: $text-hover;
	}

	.flex-box .active .line {
		display: block;
	}

	.flex-box .line {
		display: none;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 1px;
		height: 20px;
		background: #333333;
		animation: twinkling 1s infinite ease;
	}

	.flex-box .dot {
		font-size: 40px;
		line-height: 20px;
	}

	.flex-box .bottom-line {
		height: 4px;
		background: #000000;
		width: 80%;
		position: absolute;
		border-radius: 2px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
